<template>
	<view class="bgw">
		<view class="u-flex steps">
			<view class="steps-item">
				<view class="num">
					1
				</view>
				<view class="u-tips-color u-font-24 u-m-t-16">
					分享邀请码
				</view>
			</view>
			<view class="steps-item u-flex-1 steps-item-2">
				<view class="num">
					2
				</view>
				<view class="u-tips-color u-font-24 u-m-t-16">
					朋友下单
				</view>
			</view>
			<view class="steps-item">
				<view class="num">
					3
				</view>
				<view class="u-tips-color u-font-24 u-m-t-16">
					获得佣金
				</view>
			</view>
		</view>
	</view>
	<view class="poster-wrapper">
		<image src="/static/images/icon-copy.png" mode="aspectFit" style="width: 28upx;height: 28upx;" class="copy"  @click="copy(userInfo.referralCode)"></image>
		<view class="poster">
			<view class="poster" id="poster" ref="poster">
				<image src="/static/images/share-bg.png" mode="widthFix" style="width: 100%;" class="poster-bg"></image>
				<view class="poster-content">
					<view class="u-flex">
						<u-avatar :src="baseImgUrl+userInfo.avatar" size="120" v-if="userInfo.avatar"></u-avatar>
						<u-avatar :src="defaultAvatar" size="120" v-else></u-avatar>
						<view class="u-m-l-28">
							<view class="u-font-32">
								{{hidePhone(userInfo.phone)}}
							</view>
							<view class="u-content-color u-font-28 u-p-t-10">
								邀请码：{{userInfo.referralCode || '暂未生成'}}
							</view>
						</view>
					</view>
					<view class="u-text-center u-content-color" style="margin-top: 120upx;margin-bottom: 20upx;" v-if="codeImg">
						邀请朋友 扫码加入
					</view>
					<!-- <image src="/static/images/tab-mall.png" mode="aspectFit" class="poster-code"></image> -->
					<image :src="codeImg" mode="aspectFit" class="poster-code" v-if="codeImg"></image>
				</view>
			</view>
		</view>
	</view>
	
	
	<u-gap height="120"></u-gap>
	<view class="fixed-bottom u-p-l-48 u-p-r-48 u-p-t-20 u-p-b-20 bgw" style="z-index: 9999;box-shadow: 0px -4upx 20upx 0 rgba(0, 0, 0, 0.06);" v-show="codeImg">
		<view class="u-flex">
			<view class="u-flex-1 u-p-l-10 u-p-r-10">
				<u-button type="primary" shape="circle" id="downloadBtn">保存图片</u-button>
			</view>
		</view>
	</view>
	<u-popup v-model="popupShow" mode="center">	
		<image :src="postImg" alt="" class="postImg" mode="widthFix"></image>
		<view class="u-text-center u-p-20">
			长按图片保存至手机
		</view>
		
	</u-popup>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import html2canvas from 'html2canvas';
	import {
		base64ToPath
	} from 'image-tools';
	export default {
		name: 'share',
		data(){
			return {
				codeImg:'',
				postImg:'',
				popupShow:false
			}
		},
		methods: {
			hidePhone(data){
				 return data.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2")
			},
			posterBase64ToImg(data){
				let that = this;
				uni.hideLoading();
				base64ToPath(data, '.png').then((imgPath)=>{
					this.postImg = imgPath;
					this.popupShow = true;
				})
			},
			receiveRenderData(data) {
				console.log('receiveRenderData');
				// console.log(data);
				let that = this;
				uni.hideLoading();
				base64ToPath(data, '.jpeg').then(function(imgPath) {
					// #ifdef H5   
					//H5生效
					uni.downloadFile({
						url: imgPath,
						success: (res) => {
							let link = document.createElement('a');
							console.log('保存成功' + `:`, link);
							link.href = imgPath;
							link.download = '邀请朋友注册.jpeg';
							// link.download = imgPath.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
							link.click();
						},
						fail: err => {
							console.log('保存失败' + `:`, err);
						}
					})
					// #endif
					// #ifdef APP-PLUS
					//APP-PLUS生效
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: imgPath,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
					uni.saveImageToPhotosAlbum({
						filePath: imgPath,
						success: function() {
							uni.showModal({
								content: "保存成功，请到相册查看",
								showCancel: false,
							});
			
						},
						fail: err => {
							console.log('保存失败' + `:`, err);
							that.$u.toast('保存失败');
						}
					});
					// #endif
				})
			
			},
			copy(d) {
				if (!d) {
					uni.$u.toast(`下单报单区的商品即可生成邀请码 `);
					return;
				}
				uni.setClipboardData({
					data: d,
					success() {
						uni.$u.toast(`已复制"${d}"至剪贴板`);
					}
				});
			},
			getData(){
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$u.api.getUsersCode().then(res=>{
					let {
						code,
						msg,
						data
					} = res;
					if (code != 200) {
						uni.$u.toast(msg || '错误');
						return;
					}
					if(!data.qrcode){
						uni.$u.toast('无邀请码');
						return;
					}
					base64ToPath(data.qrcode, '.jpeg').then((imgPath) => {
						// console.log(imgPath);
						this.codeImg = imgPath
					})
					
				})
			},
			openLoading(){
				uni.showLoading({
					title: '生成图片中',
					mask: true
				});
			}
		},
		onShow() {
			this.userInfo = store.state.$userInfo;
		},
		onLoad() {
			this.getData();
			
		}
		
	}
</script>



<script module="renderScript" lang="renderjs">
	import html2canvas from 'html2canvas';
	import {
		base64ToPath
	} from 'image-tools';
	// import Vue from 'vue'
	// console.log(document.querySelector('#app'));
	export default {
		mounted() {
			// console.log(process.env.NODE_ENV);

			document.querySelector('#downloadBtn').onclick = ((e) => {
				// this.exportPhoto2(e);
				this.exportPhoto();
			})
			
		},
		methods: {
			exportPhoto(e, ownerVm) {
				this.$ownerInstance.callMethod('openLoading')
				var dom = document.querySelector('#poster'); // 获取dom元素
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0,
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					// 将生产的canvas转为base64
					var base64 = canvas.toDataURL('image/png');
					this.$ownerInstance.callMethod('posterBase64ToImg', base64)
				}).catch((e) => {
					console.log(e);
				});
			},
			exportPhoto2(e, ownerInstance) {
				// ownerVm.callMethod('openLoading')
				var dom = document.querySelector('#poster'); // 获取dom元素
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0,
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					// 将生产的canvas转为base64
					var base64 = canvas.toDataURL('image/png');
					this.$ownerInstance.callMethod('receiveRenderData', base64)
				}).catch((e) => {
					console.log(e);
				});
			}
		}
	}
</script>





<style scoped lang="scss">
	page {
		background-color: #ffffff;
	}

	.steps {
		position: relative;
		padding: 20upx 100upx;
		text-align: center;

		.num {
			position: relative;
			width: 56upx;
			height: 56upx;
			border: 1px solid #E88D1A;
			color: #E88D1A;
			border-radius: 50%;
			text-align: center;
			line-height: 56upx;
			margin: 0 auto;
			background-color: #ffffff;
			z-index: 999;
		}
	}

	.steps-item-2 {
		position: relative;

		&::after {
			position: absolute;
			left: 0;
			top: 28upx;
			width: 120%;
			margin-left: -10%;
			content: " ";
			height: 1px;
			border-top: 1px dashed #DCDCDC;
		}
	}
	
	.poster-wrapper{
		position: relative;
		.copy{
			position: absolute;
			right: 150upx;
			top:250upx;
			z-index: 99;
		}
		
	}
	.postImg{
		position: relative;
		margin: 0 auto;
		width: 500upx;
		// height: 1120upx;
		display: block;
	}

	.poster {
		position: relative;
		margin: 0 auto;
		width: 710upx;
		height: 1120upx;
		background-color: #ffffff;

		.poster-content {
			position: relative;
			padding-top: 180upx;
			padding-left: 100upx;
			padding-right: 100upx;
			z-index: 999;
		}

		.poster-bg {
			position: absolute;
			z-index: 9;
		}

		.poster-code {
			width: 400upx;
			height: 400upx;
			display: block;
			margin: 0 auto;
		}
	}
</style>